<template>
	<view class="loading" style="position: relative; width: 750rpx;height: 100vh;text-align: center;" v-if="isLoading">
		<view class="text position-center" style="width: 750rpx;">
			{{ loadingTitle }}
		</view>
	</view>
	<view class="give give-index" style="width: 750rpx;" v-if="!isLoading">
		<view class="title"
			  style="width: 700rpx;height: 40px;margin: 0 auto;
					 line-height: 40px;font-weight: bold;text-align: center;">
			提示: 您可以选择{{this.allowChoseNum - this.giveList.length}}个赠送的内容
		</view>
		<view class="give-list" v-for="item in contextProductList"
			  style="width: 700rpx;margin: 10px auto;border-radius: 10px;
					 box-shadow: 0 0 10px 0 #eee;">
			<view class="label" 
				  style="box-sizing: border-box; width: 700rpx;font-weight: bold;
						 padding: 0 10px;height: 40px;font-size: 20px;line-height: 40px;">
				{{item.productName}}
			</view>
			<view class="image" style="width: 300rpx;height: 100px;margin: 0 auto;">
				<image :src="baseUrl + item.productImage" 
					   style="width: 100%;height: 100%;">
				</image>
			</view>
			<view class="isChose" 
				  style="width: 700rpx;height: 40px;font-weight: bold;
						 display: flex;align-items: center;
						 justify-content: space-around;">
				<view class="chose-btn" v-if="!isChose(item.advProductsId)"
					  @click="choseGive(item.advProductsId)">
					选择
				</view>
				<view class="cancel-chose-btn" v-if="isChose(item.advProductsId)"
					  @click="cancelChose(item.advProductsId)">
					取消选择
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { BASE_IMAGE_URL, GET_USER_INFO } from '../../../utils/CommonValues.js';
	import request from '../../../utils/request.js'
	export default {
		data() {
			return {
				userInfo: '',
				baseUrl: '',
				productList: [],
				contextProductList: [],
				giveList: [],
				orderInfo: [],
				giveInfo: [],
				productType: 1,
				allowChoseNum: 0,
				pageNum: 1,
				pageSize: 10,
				isLoading: true,
				loadingTitle: '加载中...',
			}
		},
		onLoad() {
			this.baseUrl = BASE_IMAGE_URL;
			GET_USER_INFO().then(response => {
				this.userInfo = response;
				this.getOrderProduct();
				this.getContextProduct();
				this.getGiveProduct();
			})
		},
		methods: {
			choseGive(id) {
				if(this.allowChoseNum - this.giveList.length <= 0) {
					uni.showToast({
						title: '已经超过可以选择的数量',
						icon: 'none'
					})
				} else {
					console.log("选择赠送的内容", this.giveInfo)
					request.PUT(`/system/orders/chosegive/${this.giveInfo.advOrdersId}/${id}`)
					       .then(response => {
							   uni.showToast({
								  title: response.message
							   })
							   this.getGiveProduct();
						   })
				}
			},
			cancelChose(id) {
				console.log("取消选择赠送的内容", this.giveInfo)
				request.PUT(`/system/orders/cancelchosegive/${this.giveInfo.advOrdersId}/${id}`)
					.then(response => {
						uni.showToast({
							title: response.message	
						})
						this.getGiveProduct();
					})
			},
			// 是否选择了
			isChose(id) {
				for(var i = 0; i < this.giveList.length; i++) {
					if(id == this.giveList[i].advProductsId) {
						return true;
					}
				}
				return false;
			},
			getGiveProduct() {
				request.GET(`/system/orders/give/${this.userInfo.advMembersId}/${this.productType}`, null)
				.then(res => {
					this.giveInfo = res.data;
					if(this.giveInfo) {
						// 根据订单id获取到产品清单信息
						request.GET(`/system/ordersdetail/list/app/${this.giveInfo.advOrdersId}`, null).then(r => {
							this.giveList = r.rows;
							console.log(this.giveList, '赠送订单')
						})
					} else {
						uni.showModal({
							title: '没有可结算订单',
							complete() {
								uni.navigateBack();
							}
						})
					}
				})
			},
			// 获取内容产品
			getContextProduct() {
				if(this.pageNum == 1) {
					this.isLoading = true;
					this.loadingTitle = '加载中...';
				}
				request.GET('/system/products/list/app', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					reasonable: false,
					productType: 2,
				}).then(data => {
					// this.contextProductList = data.rows;
					this.contextProductList.push(...data.rows);
					console.log("内容", this.contextProductList)
					if(this.contextProductList.length == 0) {
						this.loadingTitle = '暂无内容';
					} else {
						this.isLoading = false;
						this.pageNum = +this.pageNum + 1;
					}
				})
			},
			// getList 进入的时候要先获取到订单中的产品
			getOrderProduct() {
				request.GET(`/system/orders/bymembersid/${this.userInfo.advMembersId}/${this.productType}`, null)
				.then(res => {
					this.orderInfo = res.data;
					console.log("获取到订单数据: ", this.orderInfo)
					if(this.orderInfo) {
						// 根据订单id获取到产品清单信息
						request.GET(`/system/ordersdetail/list/app/${this.orderInfo.advOrdersId}`, null).then(r => {
							this.productList = r.rows;
							console.log(this.productList)
							this.productList.filter(item => {
								this.allowChoseNum = this.allowChoseNum + item.ordersNum;
							})
						})
					} else {
						uni.showModal({
							title: '没有可结算订单',
							complete() {
								uni.navigateBack();
							}
						})
					}
				})
			}
		}
	}
</script>

<style>

</style>
